/* entity */
import EsTask from '@model/entity/EsTask'
/* interface */
import { TaskExportGroupChecked } from '@src/component/business/BizListView/Impl/BizListViewTask/BizListViewTaskInterface'
/* model */
import MsgModel from '@model/MsgModel'
import { BizTableScopeSlot } from '@src/component/business/BizTable/BizTable'
/* methods */
import BizListViewTaskMethods from '@src/component/business/BizListView/Impl/BizListViewTask/BizListViewTaskMethods'
/* util */
import * as _ from 'lodash'
import { useFormTimezone } from 'pub-bbx-utils'
/* vue */
import { VNode } from 'vue'
import i18n from '@src/locales'

class BizListViewTaskRender<T, P> extends BizListViewTaskMethods<T, P> {
  
  /**
   * @description: 渲染选择列组件
   * @return {VNode} 选择列组件
   */  
  public renderSelectColumnComponent(): VNode {
    return (
      <biz-select-column 
        ref='BizSelectColumnComponent' 
        onSave={(value: { type: string, data: any[] }) => this.saveColumnStatus(value)} 
      />
    )
  }
  
  /**
   * @description: 渲染表格
   * @return {VNode} 表格组件
   */  
  public renderTable(): VNode {

    return (
      <biz-table-task
        ref='BizTableComponent'
        auth={this.auth}
        data={this.page.list || this.page.content || []}
        columns={this.columns}
        paymentConfig={this.paymentConfig}
        storageKey={this.taskTypeColumnsStorageKey}
        scopedSlots={this.renderTableScopedSlot()}
        onChangeSelection={(selection: any) => this.onChangeSelectionHandler(selection)}
        onSortChanged={(options: { prop?: any, order?: any }) => this.sortChangeHandler(options) }
        tableContainerHeight={this.tableContainerHeight}
        loading={this.loading}
      >
        { this.renderTableSlot() }
      </biz-table-task>
    )
  }
  
  /**
   * @description: 渲染表格具名插槽
   * @return {VNode | null} 插槽或空
   */  
  public renderTableSlot(): VNode | null {
    return null
  }
  
  /**
   * @description: 渲染表格作用域插槽
   * @return  插槽或空
   */  
  public renderTableScopedSlot(): Record<string, (data: BizTableScopeSlot) => any>| null {
    return null
  }
  
  public renderExportTaskComponent() {
    return (
      <base-export-group
        ref='BaseExportComponent'
        storageKey={this.taskTypeExportStorageKey}
        alert={(result: MsgModel<any>) => this.exportAlert(result)}
        buildParams={(checkedArray: TaskExportGroupChecked, ids: string[], exportOneRow?: boolean) => this.buildExportParams(checkedArray, ids, exportOneRow)}
        columns={this.exportTaskColumns.slice()}
        group
        validate={(ids: string[], max: number) => this.checkExportCount(ids, max)}
        method='post'
        action= {this.exportActionUrl}
      />
    )
  }
  
  /**
   * @description: 渲染高级搜索面板
   * @param {*}
   * @return {VNode}
   */  
  public renderAdvancedSearchPanel(): VNode {    
    return (
      <task-search-panel
        ref='TaskSearchPanelComponent'
        config={this.advanceSearchColumns}
        customizeList={[...this.taskFields, ...this.taskReceiptFields]}
        initData={this.initData}
        searchParams={this.searchParams}
        searchFieldStorageKey={this.advancedSearchFieldStorageKey}
        onChangeWidth={(columnNum: number) => this.setAdvanceSearchColumnWidth(columnNum)}
      >
        <div class="advanced-search-btn-group" slot="footer">
          <el-button type='plain-third' onClick={ () => this.resetSearch() }>
            {i18n.t('common.base.reset')}
          </el-button>
          <el-button type='primary' native-type="submit" onClick={() => {
            this.toggleAdvancedSearchPanel(false)
            this.advancedSearch() 
          }}>
            {i18n.t('common.base.search')}
          </el-button>
        </div>
      </task-search-panel>
    )
  }

  /**
   * @description: 渲染高级搜索面板(指派工单添加工单类型专用)
   * @param {*}
   * @return {VNode}
   */  
  public renderAdvancedSearchPanelAllot(): VNode {    
    return (
      <task-search-panel
        ref='TaskSearchPanelComponent'
        config={this.advanceSearchColumns.filter(item=>item.displayName != '工单类型')}
        customizeList={[...this.taskFields, ...this.taskReceiptFields]}
        initData={this.initData}
        searchParams={this.searchParams}
        searchFieldStorageKey={this.advancedSearchFieldStorageKey}
        onChangeWidth={(columnNum: number) => this.setAdvanceSearchColumnWidth(columnNum)}
      >
        <div class="advanced-search-btn-group" slot="footer">
          <el-button type='plain-third' onClick={ () => this.resetSearch() }>
            {i18n.t('common.base.reset')}
          </el-button>
          <el-button type='primary' native-type="submit" onClick={() => {
            this.toggleAdvancedSearchPanel(false)
            this.advancedSearch() 
          }}>
            {i18n.t('common.base.search')}
          </el-button>
        </div>
      </task-search-panel>
    )
  }

}

export default BizListViewTaskRender

